<style scoped>
    #page-pay{
        font-size: 0.12rem;
        background: #fff;
    }

    #page-pay button{
        border:0;
    }

    #page-pay form input {
        height: 0;
        width: 0;
        display: none;
    }

    #page-pay .v-pay{
        width:100%;
    }

    #page-pay .v-pay-total{
        width:calc(100% - .24rem);
        padding:0 .12rem;
        height:.7rem;
        border-bottom:1px solid #dedede;
    }

    #page-pay .v-pay-total ul{
        height:100%;
        display:flex;
        justify-content: center;
        flex-direction: column;
    }

    #page-pay .v-pay-total ul li{
        width:100%;
        font-size:.12rem;

    }

    #page-pay .v-pay-total ul li span.color_8{
        margin-right:.2rem;
    }

    #page-pay .v-pay-goodsList{
        width:calc(100% - .24rem);
        padding:0 .12rem;
        font-size:.12rem;
    }

    #page-pay .v-pay-goodsList-item{
        width:100%;
        height:.35rem;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }

    #page-pay .v-pay-goodsList-item span:nth-child(1){
        display: inline-block;
        flex:2;
    }

    #page-pay .v-pay-goodsList-item span:nth-child(2){
        flex:1;
        display: inline-block;
        text-align: right;
    }


    #page-pay .v-pay-coupon{
        height:.4rem;
        width:100%;
        padding-top:.1rem;
    }

    #page-pay .v-pay-coupon .v-pay-couponTitle{
        width:calc(100% - .24rem);
        padding:0 .12rem;
        height:.4rem;
        line-height:.4rem;
        font-size:.14rem;
        font-weight:bold;
        border-bottom:.01rem solid #dedede;
    }

    #page-pay .v-pay-coupon-item{
        width:calc(100% - .24rem);
        padding:0 .12rem;
        font-size:.12rem;
    }

    #page-pay .v-pay-coupon-item .v-pay-coupon-itemIntro{
        font-size:.12rem;
        width:100%;
        height:.35rem;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }

    #page-pay .v-pay-coupon-itemIntro .child{
        flex:1;
        text-align: right;
        -webkit-align-self: center;

    }

    #page-pay .v-pay-coupon-itemIntro>span:nth-child(1){
        flex:1;
    }


    #page-pay .v-pay-putPrice{
        height:.4rem;
        width:100%;
        padding-bottom:.1rem;
    }

    #page-pay .v-pay-putPrice  .v-pay-putPriceItem{
        width:calc(100% - .24rem);
        padding:0 .12rem;
        height:.4rem;
        line-height:.4rem;
        font-size:.14rem;
        font-weight:bold;
        border-top:.01rem solid #dedede;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }






    #page-pay .v-pay-txt{
        font-weight:bold;
        width:calc(100% - .24rem);
        font-size: .14rem;
        height:.35rem;
        line-height:.35rem;
        padding:0 .12rem;
        border-top:.01rem solid #dedede;
        border-bottom:.01rem solid #dedede;
    }

    #page-pay .v-pay-payType{
        font-size:.12rem;
        width:calc(100% - .24rem);
        padding:0 .12rem;
        height:.55rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    #page-pay .v-pay-payType .v-radio{
        margin-left: auto;
        margin-right:0;
    }

    #page-pay .v-pay-payType .payTypeImg{
        width:.3rem;
        height:auto;

    }

    #page-pay .v-pay-payType .payType_explain{
        flex:2;
        margin-left:0.13rem;
        margin-right:auto;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }

    #page-pay .v-pay-payType .payType_explain li{
        flex:1;
    }

    #page-pay .v-pay-submit{
        left: 50%;
        width:90.667%;
        height:.4rem;
        position: fixed;
        bottom:.15rem;
        transform: translateX(-50%);
        border-radius:.05rem;
        font-size:.15rem;
        z-index: 99;
        transition: background .5s ease;
    }

    #page-pay #payForm {
        padding-bottom: 0.75rem
    }
    #page-pay .v-pay-submit.disable {
        background: rgb(221, 221, 221) !important;
        pointer-events: none;
    }
</style>
<template>
    <div id="page-pay" class="page-pay page-wrap">
        <header-component :page-name="pageName"></header-component>

        <div class="v-pay background_12">

            <div class="v-pay-total">
                <ul>
                    <li><span class="v-pay-goodsNum color_8">商品数量</span><span class="color_5">{{goodsNum}}件</span></li>
                    <li><span class="v-pay-goodsPrice color_8">商品总价</span><span class="color_1"><span class="w-total">{{totalPrice}}</span>拼宝币</span></li>
                </ul>
            </div>

            <div class="v-pay-goodsList color_8">

                <div class="v-pay-goodsList-item" v-for="(k,i) in goodsList">
                    <span class="nowrap">{{i.goodsName}}</span>
                    <span>{{i.number}}人次</span>
                </div>

            </div>
            <form id="couponForm">

                <template v-if="couponList.length>0">
                <div class="v-pay-coupon background_9">
                    <div class="v-pay-couponTitle background_12 color_5">
                        优惠券抵扣
                    </div>
                </div>
                <div class="v-pay-coupon-item background_11">

                    <div class="v-pay-coupon-itemIntro" v-for="(k,i) in couponList">
                        <span class="color_8">{{i.title}}（抵扣<em class="coupon_reduce">{{i.money}}</em>元）</span>

                        <label :for="'coupon'+i.id" :class="['v-radio','background_1',currentCoupon==i.id+'_'+i.money?'':'uncheck']"></label>

                        <input type="radio" :value="i.id+'_'+i.money" :id="'coupon'+i.id" v-model="currentCoupon" :sid="i.s_id" name="coupon[]">
                    </div>

                </div>
                </template>
            </form>

            <div class="v-pay-putPrice background_11">
                <div class="v-pay-putPriceItem background_12 color_5">
                    <span>应付金额</span>
                    <span class="color_13"><span class="all-pay">{{totalPrice}}.00</span>拼宝币</span>
                </div>
            </div>

            <form id="payForm" onsubmit="return false" v-if="isWeixin">


                <div class="v-pay-coupon-item" v-if="!forbidden_balances">

                    <div class="v-pay-coupon-itemIntro background_12" v-if="userMoney>=totalPrice">
                        <span class="color_8"><em>余额支付</em>（账户余额：<em class="txt-balance">{{userMoney}}</em>拼宝币）</span>
                        <label  for="r1" :class="['v-radio','background_1',payType=='balances'?'':'uncheck']"></label >
                        <input id="r1" type="radio" v-model="payType" name="paytype" value="balances">
                    </div>

                    <p v-else style="height: 0.4rem;line-height: 0.4rem;">账户余额：{{userMoney}}拼宝币</p>

                </div>

                <p class="v-pay-txt color_5">其他支付方式</p>
            <template v-if="!!userMoney">
                <template v-if="totalPrice>userMoney">
                    <div class="v-pay-payType w-compay" >
                        <img class="payTypeImg" src="../images/pay_weixin.png">
                        <div>
                            <ul class="payType_explain">
                                <li class="color_5">微信支付 + 余额支付</li>
                                <li class="color_8">仅支持2元及以上金额</li>
                            </ul>
                        </div>
                        <label  for="r2" :class="['v-radio','background_1',payType=='compay'?'':'uncheck']"></label >
                        <input id="r2" type="radio" v-model="payType"  value="compay" name="paytype">
                    </div>
                    <div class="v-pay-payType">
                        <img class="payTypeImg" src="../images/pay_weixin.png">
                        <div>
                            <ul class="payType_explain">
                                <li class="color_5" data-payid="3">微信支付</li>
                                <li class="color_8">仅支持2元及以上金额</li>
                            </ul>
                        </div>
                        <label  for="r4" :class="['v-radio','background_1',payType=='weixin'?'':'uncheck']"></label >
                        <input id="r4" type="radio"  v-model="payType" value="weixin"  name="paytype">
                    </div>
                </template>
                <template v-else>
                    <div class="v-pay-payType" >
                        <img class="payTypeImg" src="../images/pay_weixin.png">
                        <div>
                            <ul class="payType_explain">
                                <li class="color_5" data-payid="1">微信支付</li>
                                <li class="color_8">仅支持2元及以上金额</li>
                            </ul>
                        </div>
                        <label  for="r3" :class="['v-radio','background_1',payType=='weixin'?'':'uncheck']"></label >
                        <input id="r3" type="radio" v-model="payType"  value="weixin"  name="paytype">
                    </div>
                </template>
            </template>
            <template v-else>
                <div class="v-pay-payType">
                    <img class="payTypeImg" src="../images/pay_weixin.png">
                    <div>
                        <ul class="payType_explain">
                            <li class="color_5" data-payid="2">微信支付</li>
                            <li class="color_8">仅支持2元及以上金额</li>
                        </ul>
                    </div>
                    <label  for="r4" :class="['v-radio','background_1',payType=='weixin'?'':'uncheck']"></label >
                    <input id="r4" type="radio" v-model="payType"  value="weixin" name="paytype">
                </div>
            </template>

                <button id="payformSub" class="v-pay-submit background_13 color_12" @click="submitOrder">确认支付</button>
            </form>
        </div>
    </div>
    <pop :status-pop="statusPop" :status-toast="statusToast" :msg="msg" :delay="delay">
        <template v-if="btnType==0">
            <a href="javascript:;" @click="clear">确定</a>
        </template>
        <template v-if="btnType==1">
            <a href="javascript:;" @click="statusPop=false">确定</a>
        </template>
    </pop>
</template>
<script>
    import pop from '../components/pop'
    import headerComponent from '../components/header'
//    import Config from '../config/config'
    import Request from '../config/request'
    import Cart from '../module/cart'
    import User from '../module/user'
    import Weixin from '../libs/wxShare'
    module.exports = {
        data() {
            return {
                isWeixin:false,
                pageName:'订单支付',
                forbidden_balances:false,
                payType:'', //选中的支付类型
                currentCoupon:'', //选中的优惠券
                currentCouponId:'', //选中的优惠券Id
                currentCouponPrice:0,//選中的優惠券 價值
                couponList:[],
                goodsList:[],
                userMoney:0,
                cart:{},
                goodsNum:0,
                statusPop:false,
                statusToast:false,
                delay:2000,
                msg:'',
                btnType:0,  //0 list接口401消息彈窗 1 訂單接口消息彈窗
            }
        },
        components: {
            pop,
            headerComponent
        },
        watch:{
            currentCoupon(val){
                if(!!val){
                    this.currentCouponPrice=parseInt(val.split('_')[1]);
                    this.currentCouponId=parseInt(val.split('_')[0]);
                }
            }
        },
        computed:{
            totalPrice(){
                let all=0;
                this.goodsList.forEach((item)=>{
                    all+=parseInt(item.number);
                })
                all-=parseInt(this.currentCouponPrice);
                return all;
            }
        },
        created(){
            this.$dispatch('isLoading', true);
        },
        async ready() {

            let res =await Cart.getList();

            if(!!!res.data.item){

                history.pushState('home',null,'/home');

                this.$router.go({path:'/cart'});

                return;
            };

            let userMoney =await User.getMoney()

            if (res.status == 200) {

                if (res.data && res.data.item) {

                    Cart.formatList(res.data);

                }else{

                    Cart.clear();

                }

            }else if(res.status == 401){

                this.msg=res.msg;

                this.statusPop = true;

                this.btnType=0;

            }

            if(userMoney.status==200){

                this.userMoney = parseInt(userMoney.data.money);

            }

            let sids=[],nums=[];

                res.data.item.forEach((m)=>{

                    sids.push(m.sid);

                nums.push(m.number);

            })

            let coupons =await Cart.getCoupon(sids,nums);

            this.forbidden_balances = res.data.forbidden_balances;

            this.goodsList.splice(0,this.goodsList.length);

            this.couponList.splice(0,this.couponList.length);

            if(!!res&&!!res.data&&!!res.data.item) this.goodsList.push(...res.data.item)

            if(!!coupons && !!coupons.data && !!coupons.data.item)  this.couponList.push(...coupons.data.item);

            this.goodsNum=Cart.getCartNum();

            this.isWeixin=Weixin.isWeixin;

            console.log(this.goodsList)

            this.$dispatch('isLoading', false);

        },

        beforeDestroy() {

        },
        methods: {

            clear(){

                Cart.clear();

            },
            async submitOrder(){

                let res = await User.getOrder(this.payType,Cart.cart,this.currentCouponId);

                if (res.status == 200) {

                    this.pay(res.data);

                }else{

                    this.msg=res.msg;

                    this.statusPop=true;

                    this.btnType=1;

                }

            },

            pay(data) {

                window.location.href = Config.apiDomain + '/Pay/showPayPage?token=' + User.token + '&order=' + data.order;

            }

        }
    }
</script>
